<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../lib/jquery-3.4.1.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../lib/bs/css/bootstrap.css">
    <link rel="stylesheet" href="../../CssTest/css/base.css">
</head>
<body>



<div class="container">


    <form>
        <div class="form-group">

            <label>用户名:</label>
            <input type="text" class="form-control" placeholder="xingweixin">

        </div>

        <div class="form-group">
            <label>密码:</label>

            <input type="password" class="form-control" placeholder="123">

        </div>

        <div class="form-group">

            <label>选择文件:</label>
            <input type="file" class="form-control">

        </div>

        <div class="checkbox">

            <label>
                <input type="checkbox"> cheak me out

<!--            <input type="checkbox" name="fruit" value="苹果">苹果-->
<!--                <input type="checkbox" name="fruit" value="香蕉">香蕉-->
<!--                <input type="checkbox" name="fruit" value="鸭梨">鸭梨-->
<!--                <input type="checkbox" name="fruit" value="橙子">橙子-->

            </label>

        </div>


        <button class="btn btn-default" type="submit">Submit</button>

    </form>

    <h2 class="title">内联表单1</h2>

    <form class="form-inline">

        <div class="form-group">

            <label>用户名</label>
            <input type="text" class="form-control" placeholder="xingweixin">


        </div>

        <div class="form-group">

            <label>邮件</label>
            <input type="email" class="form-control" placeholder="xingweixin">

        </div>

       <div class="checkbox">

           <label><input type="checkbox"> 同意协议 </label>

       </div>



        <button class="btn btn-default" type="submit">提交</button>


    </form>

    <h2 class="title">内联表单2 </h2>

    <form class="form-inline">

        <div class="form-group">

            <div class="input-group">

                <div class="input-group-addon">$</div>
                <input type="text" class="form-control" placeholder="10">
                <div class="input-group-addon">.00</div>

            </div>
        </div>

        <button type="submit" class="btn btn-danger">submit</button>

    </form>



    <h2 class="title">水平排列的表单</h2>


    <form class="form-horizontal">

        <div class="form-group">
            <label class="col-md-2 control-label ">用户名:</label>
            <div class="col-md-10">
                <input type="text" class="form-control " placeholder="xingweixin">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label" >密码:</label>
            <div class="col-md-10">
                <input type="password" class="form-control" placeholder="123">
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-10 col-md-offset-2">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> cheak me out
                </label>
            </div>
            </div>
        </div>

       <div class="form-group">
           <div class="col-md-offset-2 col-md-10">
               <button class="btn btn-default" type="submit">Submit</button>
           </div>
       </div>


    </form>




</div>



</body>
</html>